<template>
    <div class="head-container">
        <el-icon class="user-head-icon" >
          <UserFilled />
        </el-icon>
        <div class="user-head-info" >
            <span>用户名：{{ userInfo.userAccount }}</span><!--这里传不进来-->
            <span>角&nbsp;&nbsp;&nbsp;&nbsp;色：{{ userInfo.userRole }}</span>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia';

// defineProps({
//   userInfo: {
//     type: Object,  // ✅ 修正为小写 type
//     default: () => ({
//         userAccount: "未登录",
//         userRole: "未知角色"
//     })
//   }
// })

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

</script>

<style lang="scss" scoped>
span {
  font-size: 14px;
}

.head-container{
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #409eff; /* 主蓝色与 ChooseRole 按钮一致 */
  color: white;
  margin :0px;
  padding: 0px 10px 0px 0px; /* 添加内边距 */
  .user-head-icon{
    margin: 0px;
    padding: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    :deep(svg){
      margin: 0px;
      height: 40px;
      width: 40px;
      border: 1px solid #409eff;
      border-radius: 20px;
      background-color: #83d0fb; /* 图标背景白色 */
      color: white;
    }
  }    
  .user-head-info{
    margin-left: 15px; /* 与图标间距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.2; /* 调整行间距 */
    padding-right: 20px;
    border-right: 1px solid white;
  }
}
</style>
